<template>
  <Page
    content-class="flex flex-col gap-4"
    description="vee-validate + zod 表单验证示例"
    header-class="pb-0"
    title="vee-validate 表单验证测试"
  >
    <template #description>
      <div class="space-y-8">
        <div class="rounded-lg bg-gray-50 p-6">
          <h3 class="mb-4 text-lg font-semibold">基础表单示例</h3>
          <Basic />
        </div>

        <div class="rounded-lg bg-gray-50 p-6">
          <h3 class="mb-4 text-lg font-semibold">
            动态表单示例（使用 zod 验证）
          </h3>
          <DynamicForm />
          <Dome4 />
          <!-- <DOMETRHEE /> -->
          <!-- <DOME3 /> -->
          <!-- <RadioDome /> -->
        </div>
      </div>
    </template>
  </Page>
</template>

<script setup lang="ts">
import { Page } from '@vben/common-ui';

import Basic from './DOME/basic.vue';
import Dome4 from './DOME/Dome4.vue';
// import DOME3 from './DOME/dome3.vue';
import DynamicForm from './DOME/DynamicFormTow.vue';
</script>

<style scoped lang="scss"></style>
